
.Q5carousel {
    position: relative;
    width: 700px;
    height: 360px;
    margin: 50px auto;
}


.Q5carousel ul li {
    position: absolute;
    width: 175px;
    height: 360px;
    perspective: 50000px;
    transform-style: preserve-3d;
    transition: all 0.5s ease 0s;
}


.Q5carousel ul li:nth-child(1) {
    left: 0;
    transition-delay: 0s;
}

.Q5carousel ul li:nth-child(2) {
    left: 175px;
    transition-delay: 0.1s;
}

.Q5carousel ul li:nth-child(3) {
    left: 350px;
    transition-delay: 0.2s;
}

.Q5carousel ul li:nth-child(4) {
    left: 525px;
    transition-delay: 0.3s;
}


.Q5carousel ul li div {
    position: absolute;
    width: 100%;
    height: 360px;
    background-size: 700px 360px;
}


.Q5carousel ul li div:nth-child(1) {
    background-image: url(img/jd1.jpg);
    transform: translateZ(180px);
}

.Q5carousel ul li div:nth-child(2) {
    background-image: url(img/jd2.jpg);
    transform: rotateX(90deg) translateZ(180px);
}

.Q5carousel ul li div:nth-child(3) {
    background-image: url(img/jd3.jpg);
    transform: rotateX(180deg) translateZ(180px);
}

.Q5carousel ul li div:nth-child(4) {
    background-image: url(img/jd4.jpg);
    transform: rotateX(270deg) translateZ(180px);
}

.Q5carousel ul li:nth-child(1) div {
    background-position: 0 0;
}

.Q5carousel ul li:nth-child(2) div {
    background-position: -175px 0;
}

.Q5carousel ul li:nth-child(3) div {
    background-position: -350px 0;
}

.Q5carousel ul li:nth-child(4) div {
    background-position: -525px 0;
}

.Q5btn {
    display: block;
    width: 100px;
    height: 50px;
    border: 1px solid black;
    margin: 0 auto;
}